import React,{ useState, useEffect } from 'react'
import { Image, StyleSheet, Text, View } from 'react-native'
import { Carousel } from '@ant-design/react-native';
import Header from '../components/Header'

interface Props {
  route?:any 
}

const Swiper = ({bannerList}:any) => {
  return (
    <View style={styles.swiper}>
      <Carousel 
        style={styles.wrapper}
        selectedIndex={2}
        autoplay
        infinite
      >
        {
          bannerList && bannerList.map((item:any) => {
            return (
              <View
                style={[styles.containerHorizontal, { backgroundColor: 'red' }]}
              >
                <Image style={{ width:'100%',height:"100%",}} source={{uri:item}} />
              </View>
            )
          })
        }
      </Carousel>
    </View>
    
  )
}

const Detail = (props: Props) => {
  const [proInfo, setProInfo] = useState({})
  const [bannerList, setBannerList] = useState([])
  useEffect(() => {
    fetch('http://121.89.205.189/api/pro/detail/'+props.route.params.proid)
    .then(res=>res.json())
    .then(res => {
      setProInfo(res.data)
      setBannerList(res.data.banners[0].split(","))
    })
  }, [])
 
  return (
    <View  style={styles.container}>
      <View>
        <Header title={ proInfo.brand }/>
        <Swiper bannerList = { bannerList }/>
        <View>
          <Text>{proInfo.proname}</Text>
          <Text>价格:{proInfo.originprice}</Text>
        </View>
      </View>
      <View style={styles.bottomTool}>
        <View style={styles.bottonLeft}>
          <View>
            <Text style={styles.text2}>购物车</Text>
          </View>
        </View>
        <View style={styles.bottonRight}>
          <View style={styles.addCart}>
            <View>
              <Text style={styles.text2}>加入购物车</Text>
            </View>
          </View>
          <View style={styles.buyNow}>
            <View>
              <Text style={styles.text2}>立即购买</Text>
            </View>
          </View>
        </View>
      </View>
    </View>
  )
}

export default Detail

const styles = StyleSheet.create({
  container:{
    flex: 1
  },
  swiper:{
    borderRadius:15
  },
  wrapper: {
    backgroundColor: '#723232',
    borderRadius:15,
  },
  containerHorizontal: {
    borderRadius:15,

    flexGrow: 1,
    alignItems: 'center',
    justifyContent: 'center',
    height: 430,
  },
  containerVertical: {
    flexGrow: 1,
    alignItems: 'center',
    justifyContent: 'center',
    height: 430,
  },
  text: {
    color: '#fff',
    fontSize: 36,
  },
  bottomTool:{
    position: 'absolute',
    bottom: 0,
    display: 'flex',
    flexDirection:'row',
    borderColor:'#333',
    backgroundColor:'#c7c7c7',
    justifyContent:'center',
    alignItems:'center',
    width: '100%',
    height: 44,
  },
  bottonLeft:{
    flex: 1,
    display: 'flex',
    justifyContent:'center',
    alignItems:'center'
  },
  bottonRight:{
    height: 44,
    flex: 1,
    display: 'flex',
    flexDirection:'row',
    alignItems:'center',
    justifyContent:'center',
    borderRadius:22
  },
  addCart:{
    height: 44,
    backgroundColor:'#ff4800',
    flex:1,
    borderRadius:22,
    borderTopEndRadius:0,
    borderBottomRightRadius:0,
    display: 'flex',
    alignItems:'center',
    justifyContent:'center'
  },
  buyNow:{
    height: 44,
    backgroundColor:'#f66',
    flex:1,
    borderRadius:22,
    borderTopLeftRadius:0,
    borderBottomLeftRadius:0,
    display: 'flex',
    alignItems:'center',
    justifyContent:'center'
  },
  text2:{
    color: "#fff",
    fontSize:18,
    fontWeight:'bold'
  },
})
